<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<!-- 
    指令： 自定义属性
          1、v-cloak: 解决插值表达式闪烁问题
          2、v-text:填充纯文本 并且没有闪烁问题
          3、v-html：填充纯文本、html片段 会对代码进行解析，有存在安全性问题
          建议在可信赖网站内部使用
          4、v-pre：展示原数据 原代码 跳过编译。
          5、v-once:只渲染元素和数据一次
 -->
<!-- 
     数据响应式： 指当数据发生改变以后，页面也会跟着更新改变，叫做'数据驱动视图更新'
     数据绑定：就是将数据绑定到页面上
  -->

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-text="msg"></div>
        <div v-html="str"></div>
        <div v-pre>{{msg}}</div>
        <div v-once>{{info}}</div>
        <!-- 
            v-cloak 处理插值表达式的闪动闪烁问题
            原理： 先将元素进行隐藏，等待vue将数据编译成功后，
                  再将其渲染到页面当中，并把v-cloak样式删除。
         -->
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "欢迎你",
                str: "<h1>世界</h1>",
                info: "喜欢你",
            },
        });
    </script>
</body>

</html>